<template>
  <div
    class="industry-item"
    :ref="'cateImg-' + item.id"
    @click="handleToDetail(item)"
    :style="{
      'background-image': `url(${handleLogoUrl(item.logoUrl)})`,
    }"
  >
    <img
      v-if="isShowFollow"
      class="follow-img"
      @click.stop="handleCollect"
      :src="!item.isCollect ? unFollow : noBorderYellowStar"
    />
    <div class="industry-text text-ellipsis">
      {{ item.industryName }}
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import { campusCollect } from '@/api/industryMap.js';
import noBorderYellowStar from '@/assets/images/noBorderYellowStar.png';
import unFollow from '@/assets/images/industryMap/unFollow.png';
import defaultImg from '@/assets/images/industryMap/default.png';
const router = useRouter();
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  isShowFollow: {
    type: Boolean,
    default: true,
  },
  comType: {
    type: String,
    default: 'industry',
  },
});

const emit = defineEmits(['cancelCollect']);

const handleToDetail = () => {
  const routeObj = {
    name: 'IndustryDetail',
    query: {
      code: props.item.id,
      industryType: props.item.industryType,
      name: encodeURIComponent(props.item.industryName),
    },
  };
  router.push(routeObj);
};

const handleCollect = async (val) => {
  const params = {
    dataId: props.item.id,
    dataType: 14,
    action: props.item.isCollect ? 0 : 1, // 1新增收藏  0取消收藏
  };
  const res = await campusCollect(params);
  if (res.code == 200) {
    props.item.isCollect = !props.item.isCollect;
    showToast(params.action == 1 ? '收藏成功！' : '已取消收藏');
    // 收藏列表需要单独处理
    if (props.comType == 'collect') {
      emit('cancelCollect', props.item);
    }
  }
};

const handleLogoUrl = (url) => {
  if (/^http/.test(url)) {
    return url;
  } else {
    return defaultImg;
  }
};
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.industry-item {
  min-width: 0;
  position: relative;
  border-radius: 12px;
  width: 100%;
  background-position: 50%;
  background-size: 100% 100%;
  transition: background-size 0.5s ease;
  box-shadow: 0px 5px 24px 0px #9eb6db;
  &:hover {
    background-size: 108% 108%;
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/images/industryMap/cardBackground.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 12px;
  }
  .follow-img {
    position: absolute;
    width: 37px;
    height: 37px;
    right: 16px;
    top: 16px;
    z-index: 999;
  }
  .industry-text {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    text-align: center;
    font-size: 28px;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    padding: 0 24px;
  }
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
